<!DOCTYPE html>
<html lang="ru">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="color-scheme" content="dark light">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="fonts/fonts.css">
    <link rel="stylesheet" href="styles/globals.css">
    <link rel="stylesheet" href="styles/variables.css">
    <link rel="stylesheet" href="styles/style.css">
    <link rel="stylesheet" href="styles/dark.css">
    <link rel="stylesheet" href="styles/light.css">
    <title>Сложно сосредоточиться</title>
  </head>
  <body class="page">
    <header class="header camera">
      <nav class="header__theme-menu">
        <ul class="header__theme-menu-list">
          <li class="header__theme-menu-item">
            <button
              class="header__theme-menu-button header__theme-menu-button_active header__theme-menu-button_type_light"
            >
              День
            </button>
          </li>
          <li class="header__theme-menu-item">
            <button
              class="header__theme-menu-button header__theme-menu-button_type_auto"
              disabled
            >
              Авто
            </button>
          </li>
          <li class="header__theme-menu-item">
            <button
              class="header__theme-menu-button header__theme-menu-button_type_dark"
            >
              Неон
            </button>
          </li>
        </ul>
      </nav>
      <h1 class="header__title">no focus</h1>
      <p class="header__text title-decor">
        Что делать, когда не можешь делать ничего<br>
        Или почему нам так сложно сконцентрироваться, особенно когда очень надо
      </p>
      <span class="header__topcorner" aria-hidden="true">REC</span>
    </header>
    <main class="content">
      <section class="hard_to_concentrate">
       <h2 class="section__header">
          Почему сосредоточиться так сложно
        </h2>
        <article class="card">
            <h3 class="title-decor section__subheader">Многозадачность</h3>
            <p class="section__text">
              Особенно сложно сосредоточиться, когда задач много и все они — важные.
              Где же легендарная многозадачность, когда она так нужна вам (и всем нанимающим
              менеджерам этого мира)? А дело в том, что её просто не существует. Исследователи
              <a href="https://www.dana.org/article/multicosts-of-multitasking/" target="_blank" class="section__link">
                выяснили</a>, что мозгу тяжело концентрироваться даже на двух делах одновременно.
              А когда в поле внимания попадает несколько важных задач, организм паникует и
              выделяет кортизол и адреналин — «гормоны стресса». Из-за этого мы работаем
              невнимательно: ошибаемся и быстро устаём.
            </p>
        </article>
        <article class="card">
          <h3 class="title-decor section__subheader">Дофамин</h3>
          <p class="section__text">
            С гормонами стресса всё понятно, но дальше — ещё интереснее. В нашей
            невозможности сосредоточиться замешана и полная противоположность стрессу —
            дофамин. Это вещество участвует в системе вознаграждения мозга. Причём тут
            он? Мы часто отвлекаемся от важной задачи на что-то более «приятное» для
            мозгов. Например, смотрим лайки в соцсетях. В это время и выделяется
            дофамин — и мы чувствуем удовольствие. Получается замкнутый круг: чем
            больше отвлекаешься, тем больше удовольствия получаешь.
          </p>
        </article>
      </section>
      <section class="what_reduces_attention">
        <h2 class="section__header">Что снижает концентрацию внимания?</h2>
        <article class="card">
          <h3 class="title-decor section__subheader">Многозадачность</h3>
          <p class="section__text">
            Как концентрация может снижаться из-за… концентрации? Любая стрессовая
            ситуация (и резко меняющийся мир в целом) заставляет наш мозг постоянно
            «сканировать» окружающую среду на предмет опасности. Например, читать новости
            вместо работы. Но быть собранными всё время — невозможно. Концентрация —
            мышца, и она может не выдержать, если не давать ей отдохнуть.
          </p>
        </article>
        <article class="card">
          <h3 class="title-decor section__subheader">Еда</h3>
          <p class="section__text">
            «Быстрые углеводы» — сахар, белый хлеб, сладости — молниеносно доставляют
            в мозг энергию и помогают ему лучше работать. Но уходит эта энергия также быстро,
            как и приходит. А мы в результате попадаем на «углеводные качели»: как только
            действие «быстрых углеводов» заканчивается, мы чувствуем усталость и сонливость.
            И хотим ещё больше быстрых углеводов.
          </p>
        </article>
        <article class="card">
          <h3 class="title-decor section__subheader">Гаджеты</h3>
          <p class="section__text">
            Да-да, это та самая ситуация, когда на экране ноутбука — код, в наушниках — подкаст,
            а на компьютере фоном — ещё и видео с забавными утятами. В результате мозг пытается
            переключиться с одной задачи на другую — и просто не может. А чтобы вернуться к
            состоянию полной концентрации, человеку в среднем нужно 20 минут. Вот и получается,
            что чем больше времени мы проводим в гаджетах, тем больше времени затем нужно,
            чтобы вернуться к работе.
          </p>
        </article>
      </section>
      <section class="how_to_concentrate">
        <h2 class="section__header">Как концентрироваться лучше, чем золотая рыбка (то есть дольше трёх секунд)</h2>
        <h3 class="title-decor section__subheader">5 простых (на самом деле не очень) советов</h3>
        <ul class="section__list">
          <li class="section__list-item">
            <h4 class="title-decor section__list-header">Представьте небо и облака</h4>
            <p class="section__text">
              Или листья в ручье. Тут дело в лёгкой медитации, которая помогает успокоиться.
              Ведь часто именно тревожные мысли о сложных задачах как раз и мешают эти сложные
              задачи делать. В такие моменты можно закрыть глаза и представить, что чистое
              небо — это вы, а облака — тревожные мысли. И сколько бы их ни было — ясное небо
              всегда будет где-то там, за тучами, и никуда не денется. Это упражнение поможет
              вернуться в настоящий момент, а не волноваться о потенциальных проблемах из будущего.
            </p>
          </li>
          <li class="section__list-item card">
            <h4 class="title-decor section__list-header">Включите музыку</h4>
            <p class="section__text">
              Но не любую, и не любимую. Любимая может быть связана с сильными положительными
              эмоциями, которые тоже очень сильно отвлекают. Подойдёт тихая, спокойная,
              умеренно-ритмичная. Можно вообще попробовать включить плейлист в «белым шумом»
              или нейромузыкой.
            </p>
          </li>
          <li class="section__list-item card">
            <h4 class="title-decor section__list-header">Прогуляйтесь</h4>
            <p class="section__text">
              Или даже пробегитесь. Лучше найти парк или лес: один эксперимент
              <a href="https://www.sciencedirect.com/science/article/abs/pii/S0272494415000328" target="_blank" class="section__link">
                показал</a>, что созерцание природы повышает концентрацию, в то время как после просмотра городских
              пейзажей она наоборот понижается. Можно совместить прогулку с физическими упражнениями
              или бегом — так в мозг поступит ещё больше кислорода и он будет лучше работать.
              Но и простая двадцатиминутная прогулка — тоже отличный вариант.
            </p>
          </li>
          <li class="section__list-item card">
            <h4 class="title-decor section__list-header">Хорошо ешьте</h4>
            <p class="section__text">
              Мы — не ваша бабушка, но это правда важно. Выбирайте продукты, которые препятствуют
              резким скачкам сахара в крови. Например, с высоким содержанием клетчатки: овощи,
              ягоды, бобовые (нут, чечевица, фасоль), коричневый рис, хлеб из цельнозерновой пшеницы.
            </p>
          </li>
          <li class="section__list-item card">
            <h4 class="title-decor section__list-header">Читайте</h4>
            <p class="section__text">
              Настоящие бумажные книги. Это правда помогает с концентрацией: чтобы прочитать
              пост в соцсети, достаточно нескольких минут или даже секунд. А вот интересная книга
              способна затянуть и на несколько часов и круто тренирует направленное внимание.
            </p>
          </li>
        </ul>
      </section>
      <section class="advices_in_pictures">
        <h2 class="title-decor section__subheader">А можно в картинках?</h2>
        <div class="gallery">
          <img src="./images/sunset.png"    class="gallery__image horizontal" alt="Закат">
          <img src="./images/ice-cream.png" class="gallery__image vertical"   alt="Мороженое">
          <img src="./images/tape.png"      class="gallery__image vertical"   alt="Кассета">
          <img src="./images/books.png"     class="gallery__image square"     alt="Книги">
          <img src="./images/street.png"    class="gallery__image horizontal" alt="Улица">
        </div>
      </section>
    </main>
    <footer class="footer camera">
      <h2 class="footer__text">focus</h2>
    </footer>
    <script src="./scripts/script.js"></script>
  </body>
</html>
